import { PenChildProps } from "@/types";
import {
  Button,
  ColorPicker,
  InputNumber,
  Select,
  Slider,
  Space,
  Switch,
} from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { PensSelection } from "@/components/common/PensSelection.tsx";
import { useState } from "react";
import { DeleteOutlined } from "@ant-design/icons";
import { LineAnimateType } from "@meta2d/core";
//处理虚线
let lineDashArr = {
  type1: undefined,
  type2: [10, 10],
  type3: [10, 10, 2, 10],
};
//处理虚线
const getLineDashValue = (arr: number[] | undefined) => {
  if (arr == undefined) return;
  for (const key in lineDashArr) {
    if (
      JSON.stringify(lineDashArr[key as keyof typeof lineDashArr]) ==
      JSON.stringify(arr)
    ) {
      return key;
    }
  }
};

export function AnimationLine({ penOptions, setPenValue }: PenChildProps) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="动画效果">
          <Select
            className={"w-full"}
            value={penOptions.lineAnimateType}
            options={[
              { label: "水流", value: LineAnimateType.Normal },
              { label: "水珠流动", value: LineAnimateType.Beads },
              { label: "圆点", value: LineAnimateType.Dot },
            ]}
            onSelect={(value) => {
              setPenValue("lineAnimateType", value);
            }}
          />
        </FormRowCol>
        {penOptions.lineAnimateType == LineAnimateType.Beads && (
          <FormRowCol label="线条样式">
            <Select
              className={"w-full"}
              value={getLineDashValue(penOptions.animateLineDash)}
              options={[
                { label: "样式1", value: "type1" },
                { label: "样式2", value: "type2" },
                { label: "样式3", value: "type3" },
              ]}
              onSelect={(value) => {
                setPenValue(
                  "animateLineDash",
                  lineDashArr[value as keyof typeof lineDashArr],
                );
              }}
            />
          </FormRowCol>
        )}
        {penOptions.lineAnimateType == LineAnimateType.Dot && (
          <FormRowCol label="圆点大小">
            <InputNumber
              className={"w-full"}
              value={penOptions.animateDotSize}
              onChange={(value) => {
                setPenValue("animateDotSize", value);
              }}
            />
          </FormRowCol>
        )}
        <FormRowCol label="动画线宽">
          <InputNumber
            className={"w-full"}
            value={penOptions.animateLineWidth}
            onChange={(value) => {
              setPenValue("animateLineWidth", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="动画颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.animateColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("animateColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="动画速度">
          <Slider
            min={1}
            max={5}
            value={penOptions.animateSpan}
            onChange={(value) => {
              setPenValue("animateSpan", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="反向流动">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.animateReverse}
            onChange={(checked) => {
              setPenValue("animateReverse", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="循环次数">
          <InputNumber
            placeholder={"Infinity"}
            className={"w-full"}
            value={penOptions.animateCycle}
            onChange={(value) => {
              setPenValue("animateCycle", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="自动播放">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.autoPlay}
            onChange={(checked) => {
              setPenValue("autoPlay", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol
          label="保持状态"
          illustrate={"动画播放（次数）结束，是否回到初始状态"}
        >
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.keepAnimateState}
            onChange={(checked) => {
              setPenValue("keepAnimateState", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol
          label="下个动画"
          illustrate={"当前 pen 播放动画结束，自动播放下一个动画。"}
        >
          <PensSelection
            open={open}
            onOk={(id) => {
              setPenValue("nextAnimate", id);
              setOpen(false);
            }}
            value={penOptions.nextAnimate || ""}
            onClose={() => setOpen(false)}
          ></PensSelection>
          <Button onClick={() => setOpen(true)}>
            {penOptions.nextAnimate || "选择"}
          </Button>
          <Button
            onClick={() => setPenValue("nextAnimate", undefined)}
            style={{ marginLeft: 5 }}
            icon={<DeleteOutlined />}
          ></Button>
        </FormRowCol>
        <Space size={[20, 20]}>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.startAnimate(penOptions.id);
            }}
          >
            播放
          </Button>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.pauseAnimate(penOptions.id);
            }}
          >
            暂停
          </Button>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.stopAnimate(penOptions.id);
            }}
          >
            停止
          </Button>
        </Space>
      </Space>
    </>
  );
}
